<template>
  <view v-if="visible" class="m-date">
    <view v-if="visible" class="mask-layer" @tap="$emit('update:visible', false)" />
    <uni-transition class=" m-data-picker" mode-class="slide-bottom" :show="visible">
      <view class="btn">
        <view class="cancel" @tap="cancel">
          取消
        </view>
        <view class="confirm" @tap="confirm">
          确定
        </view>
      </view>
      <picker-view :indicator-style="indicatorStyle" :value="dateValue" @change="bindChange">
        <picker-view-column>
          <view v-for="(item, index) in years" :key="index" class="item">
            {{ item }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view v-for="(item, index) in months" :key="index" class="item">
            {{ item }}
          </view>
        </picker-view-column>
        <picker-view-column>
          <view v-for="(item, index) in days" :key="index" class="item">
            {{ item }}
          </view>
        </picker-view-column>
        <template v-if="type === 'datetime'">
          <picker-view-column>
            <view v-for="(item, index) in hours" :key="index" class="item">
              {{ item }}
            </view>
          </picker-view-column>
          <picker-view-column>
            <view v-for="(item, key) in minutes" :key="key" class="item">
              {{ item }}
            </view>
          </picker-view-column>
        </template>
      </picker-view>
    </uni-transition>
  </view>
</template>

<script>
import { getFiles } from "@/utils/getFiles";
const files = require.context("./mixins", false, /\.js$/);
const minxins = getFiles(files);

export default {
  mixins: [...minxins],
  props: {
    value: {
      type: String,
      required: true
    },
    // 是否显示
    visible: {
      type: Boolean,
      default: true
    },
    // 最小年份  可选择往前10年
    minYear: {
      type: Number,
      default: 10
    },
    // 格式 date || datetime
    type: {
      type: String,
      default: "datetime"
    }
  },
};
</script>

<style lang="scss" scoped src="./index.scss"></style>
